<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3>
                用户注册
            </h3>
            <div class="row clearfix">
                <div class="col-md-2 column">
                </div>
                <div class="col-md-8 column">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <span style="color:red;" id="username_info"></span>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" onchange="onUserNameChanged();"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="telephone" class="col-sm-2 control-label">手机号</label>
                            <span style="color:red;" id="telephone_info"></span>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="telephone" onchange="onTelephoneChanged();" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">邮箱</label>
                            <span style="color:red;" id="email_info"></span>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" onchange="onEmailChanged();" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nickname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="nickname" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gender" class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="gender" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="code" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default" onclick="return sendSMS();">点击获取验证码</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default" onclick="return signUp();">注册</button>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="col-md-2 column">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function sendSMS(){
        //获取手机号
        let phone=document.getElementById("telephone").value;
        //请求服务器
        let url="http://localhost:9001/kx/user/sms";
        let requestJSON={};
        requestJSON.phone=phone;
        $.rest("post",url,requestJSON,function(data){
            if(data.code==200){
                alert("验证码已经发送");
            }
        });
        return false;
    }

    function signUp(){
        //注册
        // let username=document.getElementById("username").value;
        // let password=document.getElementById("password").value;
        // let telephone=document.getElementById("telephone").value;
        // let email=document.getElementById("email").value;
        // let nickname=document.getElementById("nickname").value;
        // let gender=document.getElementById("gender").value;
        // let code=document.getElementById("code").value;

        let url="http://localhost:9001/kx/user/signup";
        let requestJSON={};
        requestJSON.username=document.getElementById("username").value;
        //password进行md5处理
        requestJSON.password=md5(document.getElementById("password").value);
        requestJSON.telephone=document.getElementById("telephone").value;
        requestJSON.email=document.getElementById("email").value;
        requestJSON.nickname=document.getElementById("nickname").value;
        requestJSON.gender=document.getElementById("gender").value;
        requestJSON.code=document.getElementById("code").value;

        $.rest("post",url,requestJSON,function (data){
            if(data.code==200){
                alert("注册成功");
            }else{
                alert(data.msg);
            }
        });

        return false;



    }


    function onUserNameChanged(){
        //获取目前的username
        let username=document.getElementById("username").value;
        let url="http://localhost:9001/kx/user/checkinfo";
        let requestJSON={};
        requestJSON.info=username;
        requestJSON.type=1;
        //请求网络，判断用户名是否存在
        $.rest("post",url,requestJSON,function(data){
            if(data.code==200){
                //数据可以使用
                document.getElementById("username_info").style.color="green";
                document.getElementById("username_info").innerHTML="用户名可以使用";
            }else{
                //数据不可以使用
                document.getElementById("username_info").style.color="red";
                document.getElementById("username_info").innerHTML="用户名已经被占用";
            }
        });
    }
    function onTelephoneChanged(){
        //获取目前的telephone
        let telephone=document.getElementById("telephone").value;
        let url="http://localhost:9001/kx/user/checkinfo";
        let requestJSON={};
        requestJSON.info=telephone;
        requestJSON.type=2;
        //请求网络，判断电话号是否存在
        $.rest("post",url,requestJSON,function(data){
            if(data.code==200){
                //数据可以使用
                document.getElementById("telephone_info").style.color="green";
                document.getElementById("telephone_info").innerHTML="电话号可以使用";
            }else{
                //数据不可以使用
                document.getElementById("telephone_info").style.color="red";
                document.getElementById("telephone_info").innerHTML="电话号已经被占用";
            }
        });
    }
    function onEmailChanged(){
        //获取目前的email
        let email=document.getElementById("email").value;
        let url="http://localhost:9001/kx/user/checkinfo";
        let requestJSON={};
        requestJSON.info=email;
        requestJSON.type=3;
        //请求网络，判断电子邮件是否存在
        $.rest("post",url,requestJSON,function(data){
            if(data.code==200){
                //数据可以使用
                document.getElementById("email_info").style.color="green";
                document.getElementById("email_info").innerHTML="电子邮件可以使用";
            }else{
                //数据不可以使用
                document.getElementById("email_info").style.color="red";
                document.getElementById("email_info").innerHTML="电子邮件已经被占用";
            }
        });
    }








</script>
</body>
</html>